<template>
    <div id="applyTable">
        <h3>U车贷借款申请表</h3>
        <!--借款信息-->
        <div class="applyTable-table-div">
            <ul class="table-ul">
                <li style="width: 1200px">
                    <span>业务员<i>*</i></span>
                    <span class="sealManBox">{{sealMan}}</span>
                </li>
            </ul>
        </div>

        <!--借款人资料-->
        <div class="applyTable-table-div" v-if="tableData.t101">
            <ul class="table-ul-title">
                <li>借款人资料</li>
            </ul>
            <ul class="table-ul">
                <li v-for="item in tableData.t101" :style="{width: '1200'/ item.fieldNum + 'px'}">
                    <span>{{item.cnName}}<i v-if="item.must === 1">*</i></span>
                    <el-input v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'text'" :disabled="disableInput"></el-input>
                    <input class="el-number" type="number" v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'number'" :disabled="disableInput"/>
                    <el-select v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-else-if="item.fieldTag === 'select'" :disabled="disableInput">
                        <el-option v-for="(item,index) in item.constants" :label="item.constantName" :value="item.constantValue" :key="index"></el-option>
                    </el-select>
                    <el-date-picker
                        :disabled="disableInput"
                        v-else-if="item.fieldTag === 'date'"
                        v-model="item.fieldValue"
                        type="date"
                        @change="changeDate(item)"
                        format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </li>
            </ul>
        </div>

        <!--借款信息-->
        <div class="applyTable-table-div" v-if="tableData.t102">
            <ul class="table-ul-title">
                <li>借款信息</li>
            </ul>
            <ul class="table-ul">
                <li v-for="item in tableData.t102" :style="{width: '1200'/ item.fieldNum + 'px'}">
                    <span >{{item.cnName}}<i v-if="item.must === 1">*</i></span>
                    <el-input v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'text'"></el-input>
                    <input class="el-number" type="number" v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'number'"/>
                    <el-select v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-else-if="item.fieldTag === 'select'">
                        <el-option v-for="(item,index) in item.constants" :label="item.constantName" :value="item.constantValue" :key="index"></el-option>
                    </el-select>
                    <el-date-picker
                        v-else-if="item.fieldTag === 'date'"
                        v-model="item.fieldValue"
                        type="date"
                        @change="changeDate(item)"
                        format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </li>
            </ul>
        </div>

        <!--车辆信息-->
        <div class="applyTable-table-div" v-if="tableData.t103">
            <ul class="table-ul-title">
                <li>车辆信息</li>
            </ul>
            <ul class="table-ul">
                <li v-for="item in tableData.t103" :style="{width: '1200'/ item.fieldNum + 'px'}">
                    <span>{{item.cnName}}<i v-if="item.must === 1">*</i></span>
                    <el-input v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'text'"></el-input>
                    <input class="el-number" type="number" v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'number'"/>
                    <el-select v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-else-if="item.fieldTag === 'select'">
                        <el-option v-for="(item,index) in item.constants" :label="item.constantName" :value="item.constantValue" :key="index"></el-option>
                    </el-select>
                    <el-date-picker
                        v-else-if="item.fieldTag === 'date'"
                        v-model="item.fieldValue"
                        type="date"
                        @change="changeDate(item)"
                        placeholder="选择日期">
                    </el-date-picker>
                </li>
            </ul>
        </div>

        <!--借款人资质信息-->
        <div class="applyTable-table-div" v-if="tableData.t104">
            <ul class="table-ul-title">
                <li>借款人资质信息</li>
            </ul>
            <ul class="table-ul">
                <li v-for="item in tableData.t104" :style="{width: '1200'/ item.fieldNum + 'px'}">
                    <span>{{item.cnName}}<i v-if="item.must === 1">*</i></span>
                    <el-input v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'text'"></el-input>
                    <input class="el-number" type="number" v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'number'"/>
                    <el-select v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-else-if="item.fieldTag === 'select'">
                        <el-option v-for="(item,index) in item.constants" :label="item.constantName" :value="item.constantValue" :key="index"></el-option>
                    </el-select>
                    <el-date-picker
                        v-else-if="item.fieldTag === 'date'"
                        v-model="item.fieldValue"
                        type="date"
                        @change="changeDate(item)"
                        format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </li>
            </ul>
        </div>

        <!--银行卡信息-->
        <div class="applyTable-table-div" v-if="tableData.t105">
            <ul class="table-ul-title">
                <li>银行卡信息</li>
            </ul>
            <ul class="table-ul">
                <li v-for="item in tableData.t105" :style="{width: '1200'/ item.fieldNum + 'px'}">
                    <span>{{item.cnName}}<i v-if="item.must === 1">*</i></span>
                    <el-input v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'text'"  :disabled="disableInput"></el-input>
                    <input class="el-number" type="number" v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-if="item.fieldTag === 'number'"  :disabled="disableInput"/>
                    <el-select v-model="item.fieldValue" @change="changeInput(item)" @blur="bulrInput(item)" v-else-if="item.fieldTag === 'select'"  :disabled="disableInput">
                        <el-option v-for="(item,index) in item.constants" :label="item.constantName" :value="item.constantValue" :key="index"></el-option>
                    </el-select>
                    <el-date-picker
                        :disabled="disableInput"
                        v-else-if="item.fieldTag === 'date'"
                        v-model="item.fieldValue"
                        type="date"
                        @change="changeDate(item)"
                        format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </li>
            </ul>
        </div>

        <div class="applyTable-submit">
            <el-button @click="back()">取消</el-button>
            <el-button type="primary" @click="saveLoan">下一步</el-button>
        </div>
    </div>
</template>

<script>
    import { saveLoanInfo, listProductInfo, getLoanInfo, addUser, editLoanInfo } from "@/api/api";
    export default {
        name: "applyTable",
        data () {
            return {
                constantValue: "",
                sealMan: "",
                loanNo: "",
                tableData: [],
                realNameInput: "",
                tableDataList: [],
                saveLoanInfoData: {
                    "productNo": "",
                    "productName": "车贷",
                    "salesman": "",
                    "userNo": "",
                    "loanNo": "",
                    "realName": "",
                    "list": ""
                },
                userNoData: "",
                disableButton: false,
                disableInput: false
            };
        },
        methods: {
            // 输入框值改变
            changeInput (item) {
                if (item.must === 1) {
                    if (item.fieldValue === "") {
                        this.$message.error(item.cnName + '不能为空！');
                        return false;
                    }
                }
                if (item.fieldTag === "number") {
                    if (item.fieldValue > item.maxValue) {
                        this.$message.error(item.cnName + '不能大于' + item.maxValue);
                        return false;
                    }
                    if (item.fieldValue < item.minValue) {
                        this.$message.error(item.cnName + '不能小于' + item.minValue);
                        return false;
                    }
                }
            },
            changeDate (item) {
                if (item.fieldValue !== "") {
                    item.fieldValue = this.formatDate(item.fieldValue);
                }
                console.log(item.fieldValue);
                if (item.must === 1) {
                    if (item.fieldValue === "") {
                        this.$message.error(item.cnName + '不能为空！');
                        return false;
                    }
                }
                if (item.fieldTag === "number") {
                    if (item.fieldValue > item.maxValue) {
                        this.$message.error(item.cnName + '不能大于' + item.maxValue);
                        return false;
                    }
                    if (item.fieldValue < item.minValue) {
                        this.$message.error(item.cnName + '不能小于' + item.minValue);
                        return false;
                    }
                }
            },
            // 输入框失去焦点
            bulrInput (item) {
                if (item.must === 1) {
                    if (item.fieldValue === "") {
                        this.$message.error(item.cnName + '不能为空！');
                        return false;
                    }
                }
            },
            // 取消；
            back () {
                this.$router.push({path: '/apply'});
            },
            getInputDateTime (item, data) {
                item.constantValue = data;
            },
            // 获取借款申请表字段；
            async getlistProductInfo () {
                let _this = this;
                // 如果 this.$route.query.loanNo 存在的话 调用编辑接口  不存在调用新增接口；
                if (this.$route.query.loanNo !== undefined) {
                    // 编辑
                    await editLoanInfo({
                        "loanNo": this.$route.query.loanNo
                    }).then((res) => {
                        _this.tableData = JSON.parse(res.data.ciphertext);
                        console.log(_this.tableData);
                        if (_this.tableData.loanStatus === 2) {
                            _this.disableInput = true;
                            return false;
                        } else {
                            _this.disableInput = false;
                        }
                    });
                } else {
                    // 新增
                    await listProductInfo({
                        "productNo": this.$route.query.productNo
                    }).then((res) => {
                        _this.tableData = JSON.parse(res.data.ciphertext);
                        console.log(_this.tableData);
                    });
                }
            },
            // 提交借款申请表
            async saveLoan () {
                let _this = this;
                this.tableDataList = [];
                this.tableDataInfo = [];
                if (this.tableData) {
                    for (let i=0;i<this.tableData.t101.length;i++) {
                        this.tableDataList.push(this.tableData.t101[i]);
                    }
                    for (let i=0;i<this.tableData.t102.length;i++) {
                        this.tableDataList.push(this.tableData.t102[i]);
                    }
                    for (let i=0;i<this.tableData.t103.length;i++) {
                        this.tableDataList.push(this.tableData.t103[i]);
                    }
                    for (let i=0;i<this.tableData.t104.length;i++) {
                        this.tableDataList.push(this.tableData.t104[i]);
                    }
                    for (let i=0;i<this.tableData.t105.length;i++) {
                        this.tableDataList.push(this.tableData.t105[i]);
                    }
                }
                for(let [index, value] of _this.tableDataList.entries()){
                    if (value.fieldValue !== "") {
                        this.tableDataInfo.push({
                            fieldNo: value.fieldNo,
                            fieldValue: value.fieldValue
                        });
                    }else {
                        this.$message.error(value.cnName + "不能为空！");
                        return false;
                    }
                }
                this.saveLoanInfoData.productNo = this.$route.query.productNo;
                this.saveLoanInfoData.realName = this.tableDataList[0].fieldValue;
                if (this.$route.query.userNo) {
                    this.saveLoanInfoData.userNo = this.$route.query.userNo;
                } else {
                    this.saveLoanInfoData.userNo = "";
                }
                if (this.$route.query.loanNo) {
                    this.saveLoanInfoData.loanNo = this.$route.query.loanNo;
                } else {
                    this.saveLoanInfoData.loanNo = "";
                }
                this.saveLoanInfoData.list = this.tableDataInfo;
                console.log(this.saveLoanInfoData);
                await saveLoanInfo(this.saveLoanInfoData).then(function(res) {
                    if(res.data.state.code === "200"){
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        let ciphertext =JSON.parse(res.data.ciphertext);
                        // 把loanNo、userNo传到下一个页面；
                        let loanNoData;
                        let userNo;
                        if (ciphertext.loanNo === undefined) {
                            loanNoData = _this.$route.query.loanNo;
                            userNo = _this.$route.query.userNo;
                        } else {
                            loanNoData = ciphertext.loanNo;
                            userNo = ciphertext.userNo;
                        }
                        _this.$router.push({path: '/applyDataUpload', query: {productNo: '20201710301736172929',loanNo: loanNoData, userNo: userNo}});
                    }
                });
            }
        },
        watch: {
            $route: function (to) {
                if(to.name === "applyTable"){
                    this.getlistProductInfo();
                }
            }
        },
        mounted (){
            this.$nextTick(function () {
                if (window.sessionStorage["sysUser"]) {
                    let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                    this.sealMan = userInfo.name;
                    console.log(this.sealMan);
                    this.saveLoanInfoData.salesman = userInfo.userNo;
                } else {
                    this.$router.push({path: '/login'});
                }
                this.getlistProductInfo();
            });
        }
    };
</script>

<style lang="scss">
    .apply-1{
        display: none;
    }
    #applyTable{
        font-size: 14px;
        h3{
            text-align: center;
            margin: 30px 0;
        }
        .applyTable-table-div{
            border-collapse: collapse;
            width: 1200px;
            margin: 0 auto;
            padding: 0px !important;
            border: 1px solid #ccc;
            height: auto;
            overflow: hidden;
            margin-bottom:20px;
            .table-ul-title{
                width: 100%;
                height: 45px;
                border-bottom: 1px solid #ccc;
                box-sizing: border-box;
                background: #ccc;
                li{
                    text-align: center;
                    line-height:45px;
                }
            }
            .table-ul{
                width: 100%;
                height: auto;
                overflow: hidden;
                li{
                    height: 45px;
                    line-height:45px;
                    float: left;
                    span{
                        width: 35%;
                        display: inline-block;
                        margin: 0;
                        height: 45px;
                        padding: 0 10px;
                        box-sizing: border-box;
                        border-right:1px solid #ccc;
                        border-bottom:1px solid #ccc;
                        float: left;
                        i{
                            color: #ff0000;
                        }
                    }
                    .el-input, .el-select, .sealManBox, .el-date-picker{
                        width: 65%;
                        float: left;
                        height: 45px;
                        box-sizing: border-box;
                        border: none;
                        background:none;
                        outline:none;
                        .el-input{
                            width: 100%;
                        }
                        input{
                            width: 100%;
                            height: 45px;
                            box-sizing: border-box;
                            padding: 10px 10px;
                            border: none;
                            border-bottom:1px solid #ccc;
                            border-right:1px solid #ccc;
                            border-radius: 0px;
                        }
                    }
                    .el-number, .sealManBox{
                        width: 65%;
                        float: left;
                        height: 45px;
                        box-sizing: border-box;
                        border: none;
                        background:none;
                        outline:none;
                        border-bottom:1px solid #ccc;
                        border-right:1px solid #ccc;
                        border-radius: 0px;
                        padding: 10px 10px;
                    }
                    .sealManBox{
                        line-height: 25px;
                    }
                }
            }

        }


        .applyTable-table{
            border-collapse:collapse;
            width: 1200px;
            margin: 0 auto;
            padding: 0px!important;
            border: 1px solid #ccc;
            td{
                border: 1px solid #ccc;
                margin: 0;
                height: 45px;
                span{
                    padding: 0 15px;
                    display: block;
                    i{
                        color: #ff0000;
                    }
                }
                .el-select{
                    width: 100%;
                }
                input{
                    border: none;
                    width: 100%;
                    outline:none;
                    height: 47px;
                    line-height:47px;
                }
                /*input[type="number"]::-webkit-outer-spin-button,*/
                /*input[type="number"]::-webkit-inner-spin-button {*/
                    /*-webkit-appearance: none !important;*/
                    /*margin: 0;*/
                /*}*/
                .el-date-editor{
                    width: 100%;
                }
                a{
                    color: #ff0000;
                }
                .applyTable-min-table{
                    border: none!important;
                    border-collapse:collapse;
                    td{
                        border-top: none!important;
                        border-bottom: none!important;
                        border-left: none!important;
                        border-right: 1px solid #ccc;
                    }
                    td:last-of-type{
                        border-right: none!important;
                    }
                }
            }
            .table-title{
                background: #f2f2f2;
            }
        }

        .applyTable-submit{
            text-align: center;
            margin: 30px 0;
            button{
                width: 100px;
            }
        }
    }
</style>
